<template>
  <div class="bingmap">
    <div class="select">
      <a-select
        label-in-value
        :default-value="{ key: styles[0] }"
        style="width: 200px"
        @change="handleChange"
      >
        <a-select-option v-for="item of styles" :value="item" :key="item">
          {{ item }}
        </a-select-option>
      </a-select>
    </div>
    <div class="map" id="map" ref="map"></div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

import 'ol/ol.css';
import { BingMaps } from 'ol/source';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';

@Component({
  components: {},
})
//Key: Hide key ArPgQc9ewFHRgGfKAR3PNQ83eGlTBX4MKiJZYDyJF50_MlxHen2GGy4BECsnFFQY
export default class BingMap extends Vue {
  private styles: any = [
    'RoadOnDemand',
    'Aerial',
    'AerialWithLabelsOnDemand',
    'CanvasDark',
    'OrdnanceSurvey',
  ];

  private layers: any = [];
  private map: any = [];

  public createMap() {
    this.layers = this.styles.map((ele: any) => {
      return new TileLayer({
        visible: false,
        preload: Infinity,
        source: new BingMaps({
          key: 'ArPgQc9ewFHRgGfKAR3PNQ83eGlTBX4MKiJZYDyJF50_MlxHen2GGy4BECsnFFQY',
          imagerySet: ele,
          zoom: 6,
          maxZoom: 19,
          // use maxZoom 19 to see stretched tiles instead of the BingMaps
          // "no photos at this zoom level" tiles
          // maxZoom: 19
        }),
      });
    });
    setTimeout(() => {
      this.handleChange({ key: 'RoadOnDemand', label: 'RoadOnDemand' });

      this.map = new Map({
        layers: this.layers,
        target: this.$refs['map'],
        view: new View({
          center: [11438968.29747108, 2886802.8809009036],
          zoom: 13,
        }),
      });

    }, 200);
  }

  public mounted() {
    this.createMap();
  }

  public handleChange(value: any) {
    for (let i = 0, ii = this.layers.length; i < ii; ++i) {
      this.layers[i].setVisible(this.styles[i] === value['key']);
    }
  }
}
</script>
<style lang="less" scoped>
.map {
  height: calc(100vh - 274px);
  width: 100%;
}

.select {
  margin: 0px 10px 10px 10px;
}
</style>